<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>唐若兰的个人网站</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			height: 100%;
			text-decoration: none;
		}
		
		a {
			color: #707070;
		}
		
		.ensemble {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: url(img/beijing.jpg) no-repeat;
			/* background-color: rgb(0, 0, 0,.5); */
			/* 图像铺满整个背景区域 */
			background-size: cover;
			background-position: center;
		}
		
		.header {
			height: 10%;
			width: 80%;
			background-color: #fff;
			margin: 60px 0 15px 0;
			position: relative;
			box-shadow: 0 0 10px #dbdbdb;
		}
		
		.header-sulpture {
			height: 90%;
			position: absolute;
			top: -10%;
			left: 2%;
			border: 2px solid #dbdbdb;
			border-radius: 50%;
		}
		
		.header img {
			border-radius: 50%;
		}
		
		.header-message {
			height: 100%;
			display: flex;
			flex-direction: column;
			margin-left: 10%;
		}
		
		.header-name {
			font-size: 20px;
			font-weight: 600;
			margin-top: 1%;
		}
		
		.header-introduce {
			color: #8a8a8a;
		}
		
		.banner {
			width: 80%;
			height: 70%;
			display: flex;
		}
		
		.banner-left {
			padding-top: 20px;
			width: 20%;
			height: 100%;
			background-color: #fff;
			box-sizing: border-box;
			margin-right: 15px;
			box-shadow: 0 0 10px #dbdbdb;
			position: relative;
			display: flex;
			flex-direction: column;
		}
		
		.banner-float {
			position: absolute;
			top: 45px;
			left: calc(10% - 1px);
			width: 4px;
			height: 50px;
			background-color: rgb(1, 155, 253);
		}
		
		.banner-left>div {
			height: 100px;
			border-left: 2px solid #bfbfbf;
			margin-left: 10%;
			padding-left: 10%;
			line-height: 100px;
			font-size: 18px;
			color: #707070;
			user-select: none;
			box-sizing: border-box;
			transition: all .5s;
		}
		
		.banner-left>div:hover {
			box-shadow: 0 0 10px #dbdbdd;
			font-size: 20px;
		}
		
		.banner-right {
			width: 80%;
			background-color: #fff;
			box-shadow: 0 0 10px #dbdbdb;
			position: relative;
		}
		
		.banner-right>div {
			position: absolute;
			height: 100%;
			width: 100%;
			background-color: #fff;
			overflow: scroll;
		}
		
		.current-content {
			z-index: 999;
		}
		/* 作业 */
		
		.task-item {
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
		}
		
		.task-item1 {
			padding: 0px;
		}
		
		.task-item>div {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 33%;
			margin: 3.65%;
			box-shadow: 0 0 10px #dbdbdb;
			width: 26%;
			box-sizing: border-box;
		}
		
		.task-item1 img {
			width: 80%;
			height: 80%;
		}
		
		.task-item a {
			margin-top: 5%;
		}
	</style>
</head>

<body>
	<div class="ensemble">
		<div class="header">
			<div class="header-sulpture">
				<img src="img/touxiang.jpg" alt="">
			</div>
			<div class="header-message">
				<p class="header-name">唐若兰</p>
				<p class="header-introduce">下次见面我会变得更好</p>
			</div>
		</div>
		<div class="banner">
			<div class="banner-left">
				<p class="banner-float"></p>
				<div>
					<p>作业</p>
				</div>
				<div>
					<p>案例</p>
				</div>
				<div>
					<p>项目</p>
				</div>
			</div>
			<div class="banner-right">
				<div id="task" class="current-content">实验：
					<div class="task-item">
						<div class="task-item1">
							<img src="img/3.jpg" alt="">
							<a href="shiyan4/shiyan4.html" target="_blank">实验4：制作web页面广告</a>
						</div>
                        <div class="task-item1">
							<img src="img/shiyan5.png" alt="">
							<a href="shiyan5/shiyan5.html" target="_blank">实验5：用户注册验证的设计与实现</a>
						</div>
					</div>
				</div>
				<div id="demo">

				</div>
				<div id="item">

				</div>
			</div>
			<div class="banner-right">
				<div id="task" class="current-content">练习：
					<div class="task-item">
						<div class="task-item1">
							<img src="img/zy1.jpg" alt="">
							<a href="zy1/zy1.html" target="_blank">练习1：使用JavaScript程序打印图形</a>
						</div>
						<div class="task-item1">
							<img src="img/lianxi1.jpg" alt="">
							<a href="lianxi1/lianxi1.html" target="_blank">练习2：使用DOM操作图片</a>
						</div>
                        <div class="task-item1">
							<img src="img/lianxi3.png" alt="">
							<a href="lianxi3/lianxi3.html" target="_blank">练习3：用键盘操纵坦克移动</a>
						</div>
						<div class="task-item1">
							<img src="img/lianxi4.png" alt="">
							<a href="zy1/lianxi4.html" target="_blank" style="font-weight:40px">练习4：使用jQuery修改表格</a>
						</div>
                        <div class="task-item1">
							<img src="img/lianxi5.png" alt="">
							<a href="lianxi5/lianxi5.html" target="_blank">练习5：使用jQuery制作游戏角色</a>
						</div>
						<div class="task-item1">
							<img src="img/lianxi6.png" alt="">
							<a href="lianxi6/lianxi6.html" target="_blank">练习6：选择jQuery插件demo</a>
						</div>
                        <div class="task-item1">
							<img src="img/lianxi7.png" alt="">
							<a href="lianxi7/lianxi7.html" target="_blank">练习7：使用Ajax实现判断用户名是否存在</a>
						</div>
					</div>
				</div>
				<div id="demo">

				</div>
				<div id="item">

				</div>
			</div>
		</div>
	</div>

	<script>
		//获取元素
        let banners = document.querySelectorAll('.banner-left>div');
        let contents = document.querySelectorAll('.banner-right>div');
        let float = document.querySelector('.banner-float');
        console.log(banners);
        //添加事件
        for (let i = 0; i < banners.length; i++) {
            banners[i].addEventListener('click', () => {
                contents.forEach(item => item.style.zIndex = 1); //先将所有元素的z-index复原
                contents[i].style.zIndex = 999;
                animate(float, 45 + i * 100);
            })
        }
    
        //动画函数
        function animate(obj, target, callback) {
            clearInterval(obj.timer);
            //添加计时器
            obj.timer = setInterval(function () {
                var step = (target - obj.offsetTop) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetTop == target) {
                    clearInterval(obj.timer);
                    callback && callback();
                } else {
                    obj.style.top = obj.offsetTop + step + 'px';
                }
            }, 15)
        }
	</script>
</body>

</html>